<template>
  <div class="rightBottom">
    <div id="rightBottomRigth"></div>
  </div>
</template>

<script>
// import { inspection } from '@/api/device'

export default {
  data() {
    return {
      formInline: {
        radio1: "1",
        pickertime: []
      },
      initLeftX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      initLeftY: [120, 200, 150, 80, 70, 110, 130],
      initLeftZ: [100, 200, 110, 80, 70, 110, 90],
    }
  },
  mounted() {
    this.$bus.$on('countDevice', curData => {
      // console.log(curData)
      this.initLeftX = []
      this.initLeftY = []
      this.initLeftZ = []
      if (curData.countMap && curData.countMap.length) {
        curData.countMap.map(item => {
          this.initLeftX.push(item.month)
          this.initLeftZ.push(item.total)
        })
      }
      if (curData.countAddList && curData.countAddList.length) {
        this.initLeftY = []
        curData.countAddList.map(item => {
          this.initLeftY.push(item.sum)
        })
      }
      this.initBottomRight()

    })
  },
  methods: {
    initBottomRight() {
      var rightBottomRigth = this.$echarts.init(document.getElementById("rightBottomRigth"));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#fccf7e', '#2fced2'],
        legend: {
          data: ['设备总数', '新增设备数']
        },
        grid: {
          top: "15%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.initLeftX
        },
        yAxis: {
          type: 'value',

        },
        series: [
          {
            name: '设备总数',
            type: 'bar',
            data: this.initLeftZ,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0]
            }
          },
          {
            name: '新增设备数',
            type: 'bar',
            data: this.initLeftY,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0]
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      rightBottomRigth.setOption(option, true);
    },
    getDeviceAlarmTrend(parmas) {
      inspection(parmas).then(res => {
        // console.log(res.data.data, 'inspection=========================>');
        var list = res.data.data
        this.initLeftX = []
        this.initLeftY = []
        this.initLeftZ = []


        if (list) {
          list.map(item => {
            this.initLeftX.push(item.date)
            this.initLeftY.push(item.handle)
            this.initLeftZ.push(item.nohandle)
          })
        } else {
        }
        this.initBottomRight()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.rightBottom {
  // margin-top: 1.5rem;
  // margin-left: 1.5rem;
  height: 100%;
  width: 100%;
  // background-color: red;
  .top {
    padding: 1rem;
    position: relative;
    .timeSelct {
      position: absolute;
      top: 1rem;
      right: -1rem;
    }
  }
  #rightBottomRigth {
    position: relative;
    padding-top: 1.5rem;
    height: 98%;
    // border: 0.1rem solid #ccc;
  }
}
.statistics {
  margin-bottom: 3rem;
  color: #000;
  font-size: 1.4rem;
  text-align: center;
}
.title {
  color: #33439f;
  font-size: 1.6rem;
  margin-top: 0.5rem;
  font-weight: 700;
}
</style>